<template>
  <view class="report_item" @click="handleItemClick">
    <view v-if="radioMode" class="report_radio">
      <van-icon v-show="radioMode.checked" name="checked" />
    </view>
    <view class="r_item_left">
      <view class="r_item_img"></view>
      <view class="r_l_bottom">
        <text>本次得分</text>
        <text class="score">{{ item.score }}</text>
      </view>
    </view>
    <view class="r_item_right">
      <view class="r_r_row">
        <text class="label">学校:</text>
        <text>{{ item.kindergartenName }}</text>
      </view>
      <view class="r_r_row">
        <text class="label">班级:</text>
        <text>{{ item.className }}</text>
      </view>
      <view class="r_r_row">
        <text class="label">姓名:</text>
        <text>{{ item.studentName }}</text>
      </view>
      <view class="r_r_row">
        <text class="label">性别:</text>
        <text>{{ item.sex == 1 ? '女' : '男' }}</text>
      </view>
      <view class="r_r_row">
        <text class="label">体测时年龄:</text>
        <text>{{ inspectAge }}</text>
      </view>
      <view class="r_r_row">
        <text class="label">上报时间:</text>
        <text>{{ reportTime }}</text>
      </view>
    </view>
    <view v-if="showUnLock && item.isUnlock == 1" class="report_lockseal"></view>
  </view>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'appReportItem',
  // components: {},
  props: {
    item: Object,
    showUnLock: {
      type: Boolean,
      default: true
    },
    // { checked: boolean }
    radioMode: {
      type: Object
    }
  },
  data() {
    return {}
  },
  computed: {
    reportTime() {
      return this.item.reportTime ? dayjs(this.item.reportTime).format('YYYY/MM/DD') : ''
    },
    inspectAge() {
      return parseFloat((+this.item.inspectAge).toFixed(2))
    }
  },
  methods: {
    handleItemClick() {
      this.$emit('REPORT_ITEM_CLICK', this.item)
    }
  }
}
</script>

<style lang="scss">
app-report-item {
  display: block;
}
app-report-item ~ app-report-item {
  margin-top: 30rpx;
}
.report_item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 40rpx;

  border-radius: 40rpx;
  @include boxWithDashed(40rpx, #f5af64, 10rpx);
  @include bgStriped($bgColor: #ffff43, $lineColor: #ecec43);

  .r_item_left {
    flex: 0 0 auto;
    width: 236rpx;
    height: 320rpx;
    border: 10rpx solid #005cff;
    border-radius: 40rpx;
    background-color: #00b4ff;
    overflow: hidden;
    @include boxWithDashed(20rpx, #005cff, 12rpx);
  }

  .r_item_img {
    position: relative;
    z-index: 1;
    height: 50%;
    background-image: url('#{$BASEURL}/report_card_boy.png');
    background-size: contain;
  }

  .r_l_bottom {
    text-align: center;

    text {
      color: #fff000;
      font-size: 30rpx;
      display: block;
    }

    .score {
      color: #fff;
      font-size: 100rpx;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      line-height: 80rpx;
    }
  }

  .r_item_right {
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    margin-left: 20rpx;
  }

  .r_r_row {
    font-size: 30rpx;

    .label {
      display: inline-block;
      margin-right: 10rpx;
    }
  }

  .report_lockseal {
    position: absolute;
    top: 50%;
    right: -30rpx;
    transform: translateY(-50%);
    width: 190rpx;
    height: 190rpx;
    background-image: url('#{$BASEURL}/report_unlock.png');
    background-size: contain;
    // border: 1rpx solid red;
  }

  .report_radio {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50rpx;
    height: 50rpx;
    background-color: #fff;
    border-radius: 50%;
    border: 1rpx solid #0c6af1;
    transform: translateX(-15rpx);

    color: #0c6af1;
    font-size: 52rpx;
  }
}
</style>
